*{
  margin:0;
  padding: 0;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
li{
  list-style: none;
}
@function rem($px,$unit:75){
  @return $px/$unit#{rem}
}
.container{
  //width:100vw ;
  width: rem(750);
  background: #f5f5f5;
  margin:0  auto;
  @at-root .head{
    height: rem(90);
    line-height: rem(90);
    position: relative;
    background: #fff;
    padding: 0 rem(32);
    box-sizing: border-box;
    @at-root .head i{
      width: rem(20);
      height: rem(20);
      display: inline-block;
      border-bottom: rem(4) solid #666;
      border-left: rem(4) solid #666;
      transform: rotate(45deg);
    }
    @at-root .head .title{
      display: inline-block;
      text-align: center;
      position: absolute;
      left:0;
      right: 0;
      top:0;
      font-size: rem(32);
    }
    @at-root .head .icon{
      display: inline-block;
      position: absolute;
      right:0;
      top: rem(-10);
      @at-root .head .icon rem{
        display: inline-block;
        width: rem(8);
        height:rem(8);
        border:rem(6) solid #666666;
      }
      @at-root .head .icon rem:first-child{
        position: absolute;
        top:rem(28);
        right:rem(54);
      }
      @at-root .head .icon rem:nth-child(2){
        position: absolute;
        top:rem(28);
        right:rem(27) ;
      }
      @at-root .head .icon rem:nth-child(3){
        position: absolute;
        top:rem(55);
        right:rem(54) ;
      }
      @at-root .head .icon rem:last-child{
        position: absolute;
        top:rem(55);
        right:rem(27) ;
      }
    }
  }
  @at-root .banner{
    height: rem(101);
    line-height: rem(101);
    color: #b3b3b3;
    padding: 0 rem(32);
    font-size: rem(28);
    @at-root .banner p{
      color: #508cee;
      display: inline-block;
      margin-right:rem(14);
    }
  }
  @at-root .mains{
    padding: 0 rem(32);
    @at-root .main{
      position: relative;
      height: rem(262);
      background: #fff;
      overflow: hidden;
      margin-bottom: rem(29);
      @at-root .main .dongquan{
        background: #ff801a;
        width: rem(145);
        height: rem(41);
        position: absolute;
        font-size: rem(24);
        text-align: center;
        line-height: rem(41);
        transform: rotate(-45deg);
        left:rem(-38);
        top:rem(18);
        color: #fff;
      }
      @at-root .circle_01,.circle_02{
        width: rem(34);
        height: rem(34);
        border-radius: 50%;
        position: absolute;
        left:rem(220);
        background:#f5f5f5;
      }
      @at-root .circle_01{
        top:rem(-17);
      }
      @at-root .circle_02{
        top:rem(245);
      }
      @at-root .main_voucher{
        position: absolute;
        display:inline-block;
        left:0;
        top:0;
        right: 0;
        text-align: center;
        width: rem(235);
        height: rem(262);
        color: #ff801a;
        border-right: rem(2) dashed #eee;
        @at-root .main ul .money{
          font-size: rem(55);
          margin:rem(60) 0 rem(26) 0;
        }
        @at-root .main ul .favourable{
          font-size: rem(24);
        }
      }
      @at-root .main_name{
        position: absolute;
        display:inline-block;
        left: rem(235);
        top:0;
        right: 0;
        z-index: 9;
        text-align: center;
        height: rem(262);
        font-size: rem(24);
        color:#999 ;
        @at-root .main_name li:first-child{
          color: #3a3a3a;
          margin-top:rem(71);
        }
        @at-root .main_name li:nth-child(2){
          margin:rem(27) 0;
        }
      }
      @at-root .main_name_01{
        width: rem(453);
      }
      @at-root .main_name_02{
        width: rem(362);
      }
      @at-root .draw{
        width: rem(89);
        position: absolute;
        left:rem(597);
        top:0;
        font-size: rem(24);
        height: rem(262);
        color: #ff801a ;
        border-left: rem(2) dashed #eee;
        @at-root .draw li{
          width:rem(28) ;
          margin:rem(72) 0 0 rem(30.5);
        }
      }
      @at-root .seals{
        display: none;
      }
      @at-root .seal,.seals{
        @at-root .seal .seal_wai,.seals .seal_wai{
          position: absolute;
          top:rem(59);
          left:rem(506);
          width: rem(143);
          height:rem(143);
          border:rem(4) solid #bbdefc;
          border-radius: 50%;
        }
        @at-root .seal .seal_nei, .seals .seal_nei{
          position: absolute;
          top:rem(71);
          left:rem(518);
          width: rem(125);
          height:rem(125);
          border:rem(1) solid #bbdefc;
          border-radius: 50%;
        }
        @at-root .seal .seal_zi, .seals .seal_zi{
          position: absolute;
          top:rem(87);
          left:rem(538);
          width: rem(85);
          height:rem(85);
          color:#bbdefc;
          font-size: rem(25);
          line-height: rem(85);
          transform: rotate(-45deg);
          text-align: center;
        }
      }
    }
  }
}















